<div class="page page-buttons clearfix">


	<ol class="breadcrumb breadcrumb-small">
		<li>UI Elements</li>
		<li class="active"><a href="#/ui/buttons">Buttons</a></li>
	</ol>

	<div class="page-wrap">
		<div class="row">
			<div class="col-lg-6">
				<!-- colors -->
				<div class="panel panel-lined mb30">
					<div class="panel-heading"><i>Colors</i></div>
					<div class="panel-body">
						<button type="button" class="btn btn-default">Default</button>
		                <button type="button" class="btn btn-primary">Primary</button>
		                <button type="button" class="btn btn-success">Success</button>
		                <button type="button" class="btn btn-info">Info</button>
		                <button type="button" class="btn btn-warning">Warning</button>
		                <button type="button" class="btn btn-danger">Danger</button>
		                <button type="button" class="btn btn-default" disabled>Disabled</button>
					</div>
				</div>
				<!-- #end colors -->
			</div>
			<!-- #end col -->

			<div class="col-lg-6">
				<!-- addons -->
				<div class="panel panel-lined mb30">
					<div class="panel-heading"><i>Addons</i></div>
					<div class="panel-body">
						<button type="button" class="btn btn-line-default">Lined Default</button>
		                <button type="button" class="btn btn-primary btn-rounded">Round</button>
		                <button type="button" class="btn btn-line-warning btn-rounded">Lined Round</button>
		                <button type="button" class="btn btn-line-info btn-icon-inline"><i class="fa fa-html5"></i>HTML5</button>
		                <button type="button" class="btn btn-danger btn-icon-inline btn-rounded"><i class="fa fa-css3"></i>CSS3</button>
		                <button type="button" class="btn btn-success btn-icon-inline"><i class="fa fa-gamepad"></i>Game Pad</button>
					</div>
				</div>
				<!-- #end addons -->
			</div>
			<!-- #end col -->
		</div>
		<!-- #end row -->


		<div class="row">
			<div class="col-lg-4">
				<!-- Sizes -->
				<div class="panel panel-lined mb30">
	            	<div class="panel-heading"><i>Sizes</i></div>
	           		<div class="panel-body">
	           			<p class="small">Add <code>.btn-xs</code>, <code>.btn-sm</code> or <code>.btn-lg</code> for additional sizes</p>
	           			<button type="button" class="btn btn-default btn-xs">Micro</button>
		                <button type="button" class="btn btn-default btn-sm">Small Button</button>
		                <button type="button" class="btn btn-default">Normal Button</button>
		                <button type="button" class="btn btn-default btn-lg">Large Button</button>
	           		</div>
	           	</div>
	            <!-- #end Sizes -->
			</div>

			<div class="col-lg-4">
				 <!-- Social Icons -->
				<div class="panel panel-lined mb30">
	                <div class="panel-heading"><i>Social Icons</i></div>
	                <div class="panel-body">
	                	<p class="small text-muted text-uppercase">Square Icons</p>
		                <button type="button" class="btn btn-twitter fa fa-twitter icon"></button>
		                <button type="button" class="btn btn-facebook fa fa-facebook icon"></button>
		                <button type="button" class="btn btn-gplus fa fa-google-plus icon"></button>
		                <button type="button" class="btn btn-github fa fa-github icon"></button>
		                <button type="button" class="btn btn-dribbble fa fa-dribbble icon"></button>
		                <hr/>

		                <p class="small text-muted text-uppercase">Circle Icons</p>
		                <button type="button" class="btn btn-twitter fa fa-twitter btn-icon-circle icon"></button>
		                <button type="button" class="btn btn-facebook fa fa-facebook btn-icon-circle icon"></button>
		                <button type="button" class="btn btn-gplus fa fa-google-plus btn-icon-circle icon"></button>
		                <button type="button" class="btn btn-github fa fa-github icon btn-icon-circle "></button>
		                <button type="button" class="btn btn-dribbble fa fa-dribbble icon btn-icon-circle"></button>
		            </div>
	            </div>
    			<!-- #end social-icons -->
			</div>

			<div class="col-lg-4">
				<!-- Block Buttons -->
	            <div class="panel panel-lined mb30">
                	<div class="panel-heading"><i>Block Buttons</i></div>
               		<div class="panel-body">
		                <button type="button" class="btn btn-default btn-lg btn-block">Block Button with icon left<i class="fa fa-clipboard left"></i></button>
		                <button type="button" class="btn btn-primary btn-lg btn-block">Block Button with icon right<i class="fa fa-file-text right"></i></button>
		             </div>
            	</div>
            	<!-- #end block buttons -->
			</div>
		</div>
		<!-- #end row -->


		<div class="row">
			<div class="col-lg-12">
				<!-- Button Groups -->
				<div class="panel panel-lined mb30">
                	<div class="panel-heading"><i>Button Groups</i></div>
               		<div class="panel-body">
               			<div class="row">
            				<div class="col-lg-4">
		               			<p class="small text-muted text-uppercase text-bold">Single Button Group</p>
		               			<p class="small mb15">Just wrap the buttons in a <code>.btn-group</code></p>
		               			<div class="btn-group">
				                    <button type="button" class="btn btn-default">Left</button>
				                    <button type="button" class="btn btn-default">Middle</button>
				                    <button type="button" class="btn btn-default">Right</button>
				                </div>
				                <div class="btn-group">
				                    <button type="button" class="btn btn-default fa fa-clipboard"></button>
				                    <button type="button" class="btn btn-default fa fa-scissors"></button>
				                    <button type="button" class="btn btn-default fa fa-save"></button>
				                </div>
				                <div class="btn-group btn-group-justified">
				                    <div class="btn-group" role="group">
				                        <button type="button" class="btn btn-default">I</button>
				                    </div>
				                    <div class="btn-group" role="group">
				                        <button type="button" class="btn btn-default">Am</button>
				                    </div>
				                    <div class="btn-group" role="group">
				                        <button type="button" class="btn btn-default">Justified</button>
				                    </div>
				                </div>
		                	</div>

		                	<div class="col-lg-4">
		                		<p class="small text-muted text-uppercase text-bold">Button Toolbar Group</p>
		               			<p class="small mb15">Button groups wrapped inside <code>.btn-toolbar</code></p>
		               			<div class="btn-toolbar">
				                    <div class="btn-group">
				                        <button type="button" class="btn btn-default fa fa-save"></button>
				                        <button type="button" class="btn btn-default fa fa-paste"></button>
				                    </div>    
				                     <div class="btn-group">
				                        <button type="button" class="btn btn-default fa fa-align-right"></button>
				                        <button type="button" class="btn btn-default fa fa-align-justify"></button>
				                        <button type="button" class="btn btn-default fa fa-align-left"></button>
				                    </div>    
				                     <div class="btn-group">
				                        <button type="button" class="btn btn-default fa fa-paperclip"></button>
				                    </div>    
				                </div>
			                </div> 

			                <div class="col-lg-4">
			                	<p class="small text-muted text-uppercase text-bold">Vertical Button Group</p>
		               			<p class="small mb15">Buttons wrapped inside<code>.btn-group-vertical</code></p>
		               			<div class="btn-group-vertical">
			               			<button type="button" class="btn btn-default">Top</button>
				                    <div class="btn-group dropdown" dropdown>
				                        <button class="btn btn-danger dropdown-toggle" dropdown-toggle>Middle<span class="caret"></span></button>
				                        <ul class="dropdown-menu">
				                            <li><a href="j:;">Action</a></li>
				                            <li><a href="j:;">Another action</a></li>
				                            <li><a href="j:;">Something else here</a></li>
				                            <li class="divider"></li>
				                            <li><a href="j:;">Separated link</a></li>
				                        </ul>
				                    </div>
				                    <button type="button" class="btn btn-default">Bottom</button>
				                </div>
			                </div>
           				</div>
           				<!-- #end inner row -->
               		</div> <!-- #end panel-body -->
               	</div>
               	<!-- #end Button Groups -->
			</div>
			<!-- #end col -->

		</div>
		<!-- #end row -->


		<div class="row">
			<div class="col-lg-6">
				<!-- Social Buttons -->
               	<div class="panel panel-lined mb30">
               		<div class="panel-heading"><i>Social Buttons</i></div>
               		<div class="panel-body">
               			<button type="button" class="btn btn-default btn-twitter btn-rounded"><i class="fa fa-twitter"></i>Twitter</button>
		                <button type="button" class="btn btn-default btn-facebook btn-rounded"><i class="fa fa-facebook"></i>Facebook</button>
		                <button type="button" class="btn btn-default btn-gplus"><i class="fa fa-google-plus"></i>Google</button>
		                <button type="button" class="btn btn-default btn-dribbble"><i class="fa fa-dribbble"></i>Dribbble</button>
               		</div>
               	</div>
               	<!-- #end social btns -->
			</div>

			<div class="col-lg-6">
				<!-- toggle Buttons -->
				<div class="panel panel-lined mb30">
					<div class="panel-heading"><i>Toggle Buttons</i></div>
					<div class="panel-body">
						<div class="btn-group mb15">
					        <label class="btn btn-info" ng-model="checkModel.left" btn-checkbox>Check One</label>
					        <label class="btn btn-info" ng-model="checkModel.middle" btn-checkbox>Check Two</label>
					        <label class="btn btn-info" ng-model="checkModel.right" btn-checkbox>Check Three</label>
					    </div>
					     <div class="btn-group">
					        <label class="btn btn-default" ng-model="radioModel" btn-radio="'Left'" uncheckable>Radio One</label>
					        <label class="btn btn-default" ng-model="radioModel" btn-radio="'Middle'" uncheckable>Radio Two</label>
					        <label class="btn btn-default" ng-model="radioModel" btn-radio="'Right'" uncheckable>Radio Three</label>
					    </div>
					</div>
				</div>
				<!-- #end toggle buttons -->
			</div>

		</div>
		<!-- #end row -->






	</div>
	<!-- #end page-wrap -->
</div>